<template>
  <div class="header" :style="'z-index:'+zIndex">
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :left-arrow="leftArrow"
      :border="border"
      :z-index="zIndex"
      :class="absolute?'absolute':''"
      :style="'background-color:'+backColor+';height:'+height+'px'"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div slot="right" class="van-c-right" :style="'height:'+height+'px'">    
      <slot name="right"></slot>
    </div>
    <div slot="left" class="van-c-left" :style="'height:'+height+'px'">    
      <slot name="left"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name:'ballHeader',
  props:{
    title:{
      type:String,
      default:''
    },
    leftText:{
      type:String,
      default:''
    },
    leftArrow:{
      type:Boolean,
      default:true
    },
    border:{
      type:Boolean,
      default:true
    },
    zIndex:{
      type:[String,Number],
      default:1
    },
    height:{
      type:[String,Number],
      default:46
    },
    absolute:{
      type:Boolean,
      default:false
    },
    backColor:{
      type:String,
      default:"#ffffff"
    }
  },
  methods: {
    onClickLeft(){
      this.$emit("clickLeft")
    },
    onClickRight(){
      this.$emit("clickRight")
    }
  },
}
</script>

<style scoped>
  .header{
    position: relative;
  }
  .absolute{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .header .van-c-right{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
    z-index: 6;
  }
  .header .van-c-left{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
    z-index: 6;
  }
</style>